<template>
  <div>
    <!-- 公司视频 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">公司视频</el-button>
      </div>
    </div>
    <div class="album">
      <!-- 头部的内容 -->
      <br style="clear: both" />
      <div class="title">
        <div class="title_p"></div>
      </div>

      <!-- 上传视频 -->
      <div class="Upload">
        <div class="Upload_btn">
          <el-button
            type="primary"
            class="btn"
            @click="dialogFormVisible1 = true"
            >上传视频</el-button
          >

          <el-button
            class="btn"
            style="background-color: #fff"
            @click="dialogFormVisible = true"
          >
            创建视频
          </el-button>
          <el-button class="btn" style="background-color: #fff">
            编辑排序
          </el-button>

          <input class="inp1" style="margin-left: 10px" />
          <button class="btn1" style="border: 0">
            <el-icon><Search /></el-icon>
            查询
          </button>

          <!-- 图片列表 -->
          <div class="video_box">
            <div class="video_item" v-for="item in 12">
              <div class="video_item_ul">
                <div class="video_item_li">
                  <br />
                  <div class="video_center_item">
                    <br />
                    <div class="video_logo">
                      <img
                        src="../../../assets/img/videos.png"
                        style="width: 100%; height: 100%"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
                <div class="title_text_item">锻制螺纹管件消防气体灭火管 件</div>
                <div class="video_item_icon">
                  <div class="video_item_icon1"></div>
                  <span style="font-size: 12px">01</span>
                  <div class="video_item_icon1" style="margin-left: 20px"></div>
                  <span style="font-size: 12px; margin-right: 99px">01</span>

                  <el-popover
                    placement="bottom"
                    trigger="hover"
                    style="width: 96px; height: 36px"
                  >
                    <!-- 展开 收起 -->
                    <template #reference>
                      <div class="df">
                        <div class="ddd"></div>
                        <div class="ddd"></div>
                        <div class="ddd"></div>
                      </div>
                    </template>
                    <div>
                      <div style="margin-left: 20px">
                        <el-button type="" text>删除相册</el-button>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
          </div>
          <!-- 上传图片弹出框 -->
          <el-dialog
            v-model="dialogFormVisible1"
            style="width: 780px; height: 538px"
            draggable
            align-center
            center
            class="t1"
          >
            <div class="title_title">上传图片</div>
            <div class="xian"></div>
            <el-form :model="form">
              <el-form-item label="选择相册">
                <el-select v-model="form.region" placeholder="请选择相册">
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>

              <el-form-item class="uploadimg">
                <el-upload drag multiple>
                  <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
                  <div class="el-upload__text">
                    <el-button type="primary" class="btn">上传图片</el-button>
                    <div>将文件拖放到此窗口即可上传</div>
                  </div>
                  <template #tip>
                    <div class="el_text">
                      <div>
                        1. 当上传的图片宽度超过 1000
                        像素时，系统会自动对图片进行等比例压缩
                      </div>
                      <div>
                        2. 图片支持jpg、jpeg、png格式，单张大小不超过10M
                      </div>
                      <div>
                        3.
                        请勿上传、使用带有任何联系方式（如手机、QQ、电话、微信号及微信二维码等）的图片
                      </div>
                    </div>
                  </template>
                </el-upload>

                <!--  -->
                <div class="illustrate">
                  已选择图片5张 还可以选择45张 （拖动可修改顺序）
                </div>

                <!-- 展示图片 -->
                <div class="listImg">
                  <div class="list_item" v-for="item in 5">
                    <span>
                      <img src="../../../assets/img/36.png" alt="" />
                    </span>
                    <img src="../../../assets/img/1.png" alt="" />
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="bottom_btn">
                <el-button
                  @click="dialogFormVisible1 = false"
                  style="width: 90px; height: 36px"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  @click="dialogFormVisible1 = false"
                  class="btn"
                >
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 创建相册弹出框 -->
          <el-dialog
            v-model="dialogFormVisible"
            style="width: 500px; height: 249px"
            draggable
            align-center
            center
            class="t1"
          >
            <div class="title_title">新建相册</div>
            <div class="xian"></div>
            <el-form :model="form">
              <el-form-item
                label="相册名称"
                center
                style="margin: 20px 77px 0 47px"
              >
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  style="width: 280px; height: 36px"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button
                  @click="dialogFormVisible = false"
                  style="width: 90px; height: 36px"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  @click="dialogFormVisible = false"
                  class="btn"
                >
                  确定
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import top from "../../../components/top/top.vue";
import "../../../assets/css/size.css";
// 路由
const router = useRouter();
// 弹出框 创建相册
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const form = reactive({
  name: "",
  region: "",
  type: [],
  resource: "",
});
</script>
<style>
.el-upload-dragger {
  width: 740px;
  height: 120px;
}
</style>
<style lang="scss" scoped>
.album {
  // width: 1610px;
  height: 930px;
  background: #ffffff;
  border-radius: 0px;
  margin-left: 10px;

  // 头部内容
  .title {
    width: 1530px;
    height: 198px;
    background: #ecf4ff;
    opacity: 1;
    margin: 10px 40px 20px 40px;
    box-sizing: border-box;

    .title_p {
      padding: 20px 0 20px 20px;
    }
  }

  .Upload {
    margin-left: 40px;
  }
}
.inp1 {
  width: 320px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #dcdfe5;
  border-radius: 5px 0 0 5px;
  outline: none;
  padding-left: 10px;
}
.btn1 {
  width: 90px;
  height: 37px;
  background: #3091ff;
  vertical-align: top;
  border-radius: 0px 4px 4px 0px;
  cursor: pointer;
  color: #fff;
}

.xian {
  width: 100%;
  height: 1px;
  background: #eeeeee;
  margin-bottom: 50px;
}
.t1 {
  position: relative;
}
.title_title {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 0px;
  color: #304156;
  position: absolute;
  top: 30px;
  left: 20px;
}

.uploadimg {
  width: 740px;
  height: 120px;
}

.el_text {
  // width: 486px;
  height: 53px;
  font-size: 12px;
  font-weight: 400;
  color: #abb3c3;
  line-height: 20px;
}

// 说明
.illustrate {
  width: 740px;
  height: 30px;
  background: #ecf4ff;
  opacity: 1;
  border-radius: 0px;
  padding-left: 10px;
  margin-bottom: 20px;
}

// 按钮
.bottom_btn {
  margin-top: 150px;
}

// 上传图片列表展示
.listImg {
  display: flex;
  .list_item {
    width: 60px;
    height: 60px;
    margin: 10px 0 0 20px;
    border: 1px dashed #c4c5c5;
    position: relative;
    span {
      display: block;
      width: 18px;
      height: 18px;
      position: absolute;
      top: -5px;
      right: -10px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 视频列表
.video_box {
  display: flex;
  flex-wrap: wrap;
  .video_item {
    // width: 220px;
    width: 230px;
    height: 206px;
    background: #f6f6f6;
    border: 1px solid #dddddd;
    margin: 20px 20px 20px 0;

    .video_item_li {
      width: 210px;
      height: 120px;
      background: #c6c6c6;
      opacity: 1;
      border-radius: 0px;
      margin: 10px;

      .video_center_item {
        width: 40px;
        height: 40px;
        background: #dddddd;
        border-radius: 50%;
        margin: 20px 80px;
        .video_logo {
          width: 20px;
          height: 20px;
          margin: -10px 0 0 10px;
        }
      }
    }
    .title_text_item {
      width: 182px;
      height: 34px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #333333;
      margin: 10px;
    }
    // icon
    .video_item_icon {
      display: flex;
      align-items: center;
      margin: 10px;
      .video_item_icon1 {
        width: 12px;
        height: 12px;
        background: #acacac;
      }

      .ddd {
        width: 4px;
        height: 4px;
        background: #adadad;
        border-radius: 50%;
        margin: 1px;
      }
    }
  }
}
</style>
